<template>
  <div class="overflow-auto flex flex-col items-center">
    <mine-svg-icon v-if="isMobileTerminal"
                   class="w-3 h-3 p-0.5 m-1 ml-auto" name="close"
                   fillClass="fill-zinc-900 dark:fill-zinc-200"
                   @click="onClose"></mine-svg-icon>
    <img :src="blob" ref="imageTarget" alt="">
    <mine-button :loading="loading" class="mt-4 w-[75%] xl:1/2" size="small" @click="onConfirm">确定</mine-button>
  </div>
</template>

<script>
const EMITS_CLOSE = "close"

//pc端配置对象
const pcOptions = {
  aspectRatio: 1
}
const mobileOptions = {
  //将裁剪框限制在画布的大小
  viewMode: 1,
  //移动画布，裁剪框不动
  dragMode: 'move',
  //裁剪框固定纵横比
  aspectRatio: 1,
  //裁剪框不可移动
  cropBoxMovable: false,
  //不可调整裁剪框大小
  cropBoxResizable: false
}
</script>
<script setup>
import {isMobileTerminal} from "@/utils/flexible";
import Cropper from 'cropperjs'
import 'cropperjs/dist/cropper.css'
import {onMounted, ref} from "vue";

const props = defineProps({
  blob: {
    type: String,
    required: true
  }
})
const emits = defineEmits([EMITS_CLOSE])
/**
 * 关闭
 */
const onClose = () => {
  emits(EMITS_CLOSE)
}
const loading = ref(false)
/**
 * 确定
 */
const onConfirm = () => {
  loading.value = true
  //拿到裁剪后的图片
  cropper.getCroppedCanvas().toBlob(blob => {
    console.log(URL.createObjectURL(blob))
    //调用后台接口，上传裁剪后的图片到阿里云
  })
}
const imageTarget = ref(null)
let cropper
onMounted(() => {
  cropper = new Cropper(imageTarget.value, isMobileTerminal.value? mobileOptions : pcOptions)
})

</script>